<template>
    <div class="planFormulation">
      <div class="header">
        <van-nav-bar title="方案制定" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <header>
        <img src="../../assets/images/greenFinance/6.png"/>
        <p>您的信息已受到保护，请放心填写</p>
      </header>
      <section class="section">
        <div class="registration_from">
          <p>注册国家</p>
          <input type="text" placeholder="任意国家" class="input1"  v-model.trim='formData.country'>
        </div>
        <div class="registration_from">
          <p>办理意向</p>
          <div class="xiala">
            <input type="text" placeholder="请选择（多选）" :value="resultVal"  readonly="readonly" @click="addressShow()">
            <img src="../../assets/images/greenFinance/12.png">
          </div>

        </div>
        <div class="registration_from">
          <p>法人姓名</p>
          <input type="text" placeholder="请填写中文名称" class="input1" v-model.trim='formData.aname'>

        </div>
        <div class="registration_from">
          <p>公司名称</p>
          <input type="text" placeholder="请填写公司中文名称，如未确定暂不填" class="input1" v-model.trim='formData.corporateName'>
        </div>
        <div class="registration_from">
          <p>联系电话</p>
          <input type="number" placeholder="用于接受结果及建议" class="input1" v-model.trim='formData.aphone' oninput="if(value.length>11) value=value.slice(0,11)" >
        </div>
        <div class="registration_from1">
          <p class="p1">开户银行</p>
          <van-radio-group v-model="radio">
            <van-radio name="1" checked-color="#07c160">需要<span class="span">（预估4~6周）</span></van-radio>
            <van-radio name="0" checked-color="#07c160">不需要</van-radio>
          </van-radio-group>
        </div>

        <div class="registration_from1">
          <p>上传法人证件</p>
          <div class="Merchant_foot">
          <div class="Merchant_foot_div">
            <img :src="formData.avatarshow?formData.avatarshow:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar" >
            <input type="file" name="avatar" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage($event)" ref="avatarInput" >
            <p>身份证正面</p>
          </div>
          <div class="Merchant_foot_div">
            <img :src="formData.avatarshow1?formData.avatarshow1:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar1">
            <input type="file" name="avatar1" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage1($event)" ref="avatarInput1" >
            <p>身份证反面</p>
          </div>
          <div class="Merchant_foot_div">
            <img :src="formData.avatarshow2?formData.avatarshow2:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar2">
            <input type="file" name="avatar2" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage2($event)" ref="avatarInput2" >
            <p>手持身份证</p>
          </div>
          </div>
        </div>
      </section>
      <button class="Merchant_button" @click="saveAddress()">确认</button>
      <van-popup v-model="show">
        <van-checkbox-group v-model="resultVal" >
          <p class="p2">办理意向</p>
          <van-checkbox
            v-for="(item, index) in list"
            :key="item"
            :name="item"
            checked-color="#07c160"
          >
            {{ item }}
          </van-checkbox>
        </van-checkbox-group>
      </van-popup>


    </div>
</template>

<script>
    export default {
        name: "planFormulation",
      data() {
        return {
          radio: '0',
          formData: {
            avatar: '',
            avatarshow: '',
            avatar1: '',
            avatarshow1: '',
            avatar2: '',
            avatarshow2: '',
            country:'',
            aname:'',
            corporateName:'',
            aphone:'',
          },
          show:false,
          list: [
            '注册价格便宜',
            '办理速度快',
            '开设电商平台',
            '扣税低',
            '有利签证，移民',
            '提升公司形象',
          ],
          resultVal: []



        }
      },
      mounted() {


      },
      methods: {
        addressShow(){
          this.show=true
        },
        //返回
        onClickLeft() {
          this.$router.go(-1);
        },
        //点击图片(身份证正面)触发该方法
        setAvatar() {
          //获得ref为avatarInput节点，并触发该节点
          this.$refs.avatarInput.click()
        },
        //选择上传图片（身份证正面），并将图片进行处理
        changeImage(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar = file;//对象格式，用于传向后台
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow = this.result//base64解析，用于页面上图片展示
          }
        },
        //点击身份证背面
        setAvatar1() {
          this.$refs.avatarInput1.click()
        },
        //选择身份证背面
        changeImage1(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar1 = file;
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow1 = this.result
          }
        },
        //点击手持身份证
        setAvatar2() {
          this.$refs.avatarInput2.click()
        },
        //选择手持身份证
        changeImage2(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar2 = file;
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow2 = this.result
          }
        },
        //将当前页面表单所有数据发送给后台----请求后台
        saveAddress(){
          //设置作用域
          let this_ = this;
          //将数据放在formDatas中
          const formDatas=new FormData()
          formDatas.append('registered_country',this_.formData.country)//注册国家
          formDatas.append('legal_person',this_.formData.aname)//法人名称
          formDatas.append('intention',this.resultVal)//店铺详细地址
          formDatas.append('company_name',this_.formData.corporateName)//公司姓名
          formDatas.append('phone',this_.formData.aphone)//电话号码
          formDatas.append('card_front_image',this_.formData.avatar)//身份证正面
          formDatas.append('card_back_image',this_.formData.avatar1)//身份证背面
          formDatas.append('card_hand_image',this_.formData.avatar2)//手持身份证
          formDatas.append('bank_deposit_status',this.radio)
         //发送请求到后台
          this.$axios({
            method:"post",
            url: '/api/common/v1/greenFinance/offshoreRegisterApplication',
            data:formDatas,
            headers: {
              'Content-Type':'multipart/form-data'
            }
          }).then(res=>{
            if(res.success){
              this.$router.push({path: '/offshoreRegistration'})
            }
            this.$toast(res.msg);

          }).catch(res=>{
            this.$toast(res.msg);
          })
        }
      }
    }
</script>

<style scoped>
  .planFormulation{width: 100%;background-color: #fff;}
  header{margin-top: 0.46rem;width: 100%;overflow: hidden;height: 0.43rem;line-height: 0.43rem;border-bottom: 2px solid #f7f7f7;}
  header img{width: 0.13rem;float: left;margin:0.12rem 0.1rem 0.12rem 0.15rem;}
  header p{float: left;color: #ff3d3d;}
  .section{padding-top: 0.15rem;}
  .registration_from{overflow: hidden;width: 100%;line-height: 0.45rem;}
  .registration_from p{float: left;padding: 0 0 0 0.15rem;width: 23%;}
  .registration_from select{float: left;height: 0.4rem;width: 2.85rem;background-color: #f2f2f2;border: 0;border-radius: 0.1rem;padding-left: 0.1rem;}
  .input1{float: right;height: 0.4rem;width:66%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-right: 0.21rem;margin-bottom: 0.1rem;}

  .van-radio-group{float: right;overflow: hidden;margin-right: 0.21rem;}
  .van-radio{float: left;padding-top: 0.13rem;}
  .span{color: #9e9e9e;}
  .registration_from1{overflow: hidden;width: 100%;}
  .registration_from1 p{float: left;padding: 0 0.23rem 0 0.15rem;line-height: 0.45rem;}
  .p1{float: left;padding: 0 0 0 0.15rem!important;width: 23%;line-height: 0.45rem;}
  .Merchant_button {width: 90%;color: #fff;font-size: 0.16rem;margin: 0 5% 0.2rem;background-color: #01bf47;border: 0;border-radius: 0.05rem;line-height: 0.42rem;}
  .Merchant_foot{width: 100%;margin: 0.2rem auto;background-color: #fff;overflow: hidden;padding-bottom: 0.84rem;}
  .Merchant_foot_div{width: 33.33333%;float: left;}
  .Merchant_foot_div p{font-size: 0.11rem;padding:0 0 0 0.3rem!important;text-align: center;color: #808080;}
  .Merchant_foot_div img{width: 0.8rem;height: 0.8rem;margin-left: 18%;}
 .van-popup{width: 80%;border-radius: 0.05rem;padding: 0.2rem 0;}
  .van-checkbox{line-height: 0.3rem;padding-left: 0.9rem;height: 0.3rem}
  .p2{text-align: center;line-height: 0.4rem;}
  .xiala{width: 66%;border-radius: 0.05rem;float: right;overflow: hidden;background-color: #f2f2f2;margin-bottom: 0.1rem;margin-right: 0.21rem;}
  .xiala input{float: left;height: 0.4rem;width: 87%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;}
  .xiala img{float: left;width: 0.15rem;margin-top: 0.15rem;}
</style>
